<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>12_指令_自定义指令</title>
</head>
<body>
	<!--
1. 注册全局指令
  Vue.directive('my-directive', function(el, binding){
    el.innerHTML = binding.value.toupperCase()
  })
2. 注册局部指令
  directives : {
    'my-directive' : {
        bind (el, binding) {
          el.innerHTML = binding.value.toupperCase()
        }
    }
  }
3. 使用指令
  v-my-directive='xxx'
-->
<!--
需求: 自定义2个指令
  1. 功能类型于v-text, 但转换为全大写
  2. 功能类型于v-text, 但转换为全小写
-->
<div id="demo1">
	<p v-upper-text="msg1"></p>
	<p v-lower-text="msg1"></p>
</div>
<div id="demo2">
	<p v-upper-text="msg2"></p>
	<p v-lower-text="msg2"></p>
</div>

<script src="../js/vue.js"></script>
<script>
	// 注册一个全局指令
    // el: 指令所在的标签对象
    // binding: 包含指令相关数据的容器对象
	Vue.directive('upper-text',function(el,binding){
		console.log(el,binding);
		el.textContent = binding.value.toUpperCase();
	})
	const vm = new Vue({
		el: '#demo1',
		data: {
           msg1: 'I love you',
		},
		// 注册局部指令
		directives: {
			'lower-text':function(el,binding){
			    el.textContent = binding.value.toLowerCase();
		    }
	    },
		methods: {

		}
	})
	const vm2 = new Vue({
		el: '#demo2',
		data : {
			msg2: 'you are a bitch'
		}

	})
</script>
</body>
</html>